<template>
  <div id="app">
    <div>{{count}}</div>
    <el-button type="success" @click="inc">+</el-button>
    <el-button type="success" @click="dec">-</el-button>
    <el-button type="success" @click="zero" v-if="isShow">0</el-button>
  </div>
</template>

<script>


export default {
  name: 'App',
  data:function(){
    return{
      count:0,
    }
  },
  computed:{
    isShow(){
      if(this.count===0){
        return false
      }else{
        return true
      }

    }

  },
  methods:{
    //+
    inc:function(){
      console.log('inc');
      this.count++;
    },
    //-
    dec:function(){
      console.log('dec');
      this.count--;
    },
    //0
    zero:function(){
      console.log('zero');
      this.count=0;
    }

  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
